
{%- liquid
      assign mark = 'h2'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif
-%}
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}
{%- style -%}
{{ section_identifier }} {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 
  {{ section_identifier }}.kiks-testimonials-awards .testimonials-grid {
    display: grid;
    grid-template-columns: repeat({{ section.settings.columns_number }}, 1fr);
    gap: 20px;
    {% if section.settings.columns_number == '2' %}
      max-height: {% if section.blocks.size > 6 %}640px{% else %}none{% endif %};
    {% else %}
      max-height: {% if section.blocks.size > 3 %}480px{% else %}none{% endif %};
    {% endif %}
    overflow-y: auto;
  }

  
  @media screen and (max-width: 820px) {
    {{ section_identifier }}.kiks-testimonials-awards .testimonials-grid {
      grid-template-columns: 1fr;
      max-height: {% if section.blocks.size > 3 %}480px{% else %}none{% endif %};
      padding-right: 10px;
    }
 
  }
@media only screen and (max-width: 430px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }
  
{%- endstyle -%}
<div class="testimonials-awards container">
  <div class="testimonials-awards__wrapper">
    <div class="testimonials-awards__left">
      <{{ mark }} class="testimonials-awards__title section-title">{{ section.settings.title }}</{{ mark }}>
      <div class="testimonials-awards__subtitle">{{ section.settings.description }}</div>
      <div class="awards-content">
        {%- if section.settings.sub_title != blank -%}
          <h5 class="awards-subtitle">{{ section.settings.sub_title }}</h5>
        {%- endif -%}
        <div class="awards-list">
            {%- if section.settings.award_2025 != blank -%}
            <div class="award-item">
                {% render 'picture',
                desktop_image: section.settings.award_2025,
                max_w: 120,
                class_name: 'rounded'
                %}
            </div>
            {%- endif -%}
            {%- if section.settings.award_2024 != blank -%}
            <div class="award-item">
                {% render 'picture',
                desktop_image: section.settings.award_2024,
                max_w: 120,
                class_name: 'rounded'
                %}
            </div>
            {%- endif -%}
            {%- if section.settings.award_2023 != blank -%}
            <div class="award-item">
                {% render 'picture',
                desktop_image: section.settings.award_2023,
                max_w: 120,
                class_name: 'rounded'
                %}
            </div>
            {%- endif -%}
        </div>
      </div>
    </div>
    
    <div class="testimonials-grid">
      {%- for block in section.blocks -%}
        <div class="testimonial-card" {{ block.shopify_attributes }}>
          <div class="testimonial-content">{{ block.settings.testimonial }}</div>
          <div class="testimonial-author">
            {%- if block.settings.author_image != blank -%}
              <div class="author-image">
                {% render 'picture',
                  desktop_image: block.settings.author_image,
                  max_w: 40,
                  class_name: 'rounded-circle'
                %}
              </div>
            {%- endif -%}
            <div class="author-name">{{ block.settings.author_name }}</div>
          </div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Kiks Testimonials Awards",
  "class": "kiks-testimonials-awards",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "See Why Everyone's Talking"
    },
    {
      "type": "richtext",
      "id": "description",
      "default": "<p>Max 2 is your portable workstation, gaming hub, and entertainment center—all in one feather-light frame. Stay productive and entertained wherever you go.</p>",
      "label": "Description"
    },
    {
      "type": "text",
      "id": "sub_title",
      "label": "Subtitle",
      "default": "See Why Everyone's Talking"
    },
    {
      "type": "image_picker",
      "id": "award_2025",
      "label": "2025 Award Image"
    },
    {
      "type": "image_picker",
      "id": "award_2024",
      "label": "2024 Award Image"
    },
    {
      "type": "image_picker",
      "id": "award_2023",
      "label": "2023 Award Image"
    },
    {
      "type": "header",
      "content": "Testimonial Settings"
    },
    {
      "type": "select",
      "id": "columns_number",
      "label": "Number of columns",
      "options": [
        {
          "value": "1",
          "label": "1 column"
        },
        {
          "value": "2",
          "label": "2 columns"
        }
      ],
      "default": "2"
    },
    {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
    },
    {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
            {
            "value": "h1",
            "label": "H1"
            },
            {
            "value": "h2",
            "label": "H2"
            },
            {
            "value": "h3",
            "label": "H3"
            },
            {
            "value": "h4",
            "label": "H4"
            },
            {
            "value": "h5",
            "label": "H5"
            },
            {
            "value": "h6",
            "label": "H6"
            }
        ],
        "default":   "h3"
    },
    {
        "type": "header",
        "content": "Kikstart Spacing Settings"
    },
    {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_top_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding top",
        "default": 48
      },
      {
        "type": "range",
        "id": "padding_bottom_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding Bottom",
        "default": 48
      }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "image_picker",
          "id": "author_image",
          "label": "Author Image"
        },
        {
        "type": "richtext",
        "id": "testimonial",
        "default": "<p>Max 2 is your portable workstation, gaming hub, and entertainment center—all in one feather-light frame. Stay productive and entertained wherever you go.</p>",
        "label": "Description"
        },
        {
          "type": "text",
          "id": "author_name",
          "label": "Author Name",
          "default": "Alex Chen"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Kiks Testimonials Awards",
      "blocks": [
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        },
        {
          "type": "testimonial"
        }
      ]
    }
  ]
}
{% endschema %}